<template>
  <div>
    <x-header
      title="我要报餐"
    >
      <a slot="right" @click="submit">提交</a>
    </x-header>
    <div class="main">
      <group gutter="0" v-for="(val, index) in commonList" :key="index">
        <cell
          :title="val.title"
          is-link
          :border-intent="false"
          :arrow-direction="val.showContent ? 'up' : 'down'"
          @click.native="showConFun(index)">
            <template v-slot:icon>
              <div style="margin-right: 10px;" @click.stop="clickAll(index)">
                <icon v-if="val.notAll" type="success-circle"></icon>
                <icon v-else :type="val.all ? 'success' : 'circle'"></icon>
              </div>
            </template>
        </cell>
        <checklist class="slide" :class="val.showContent?'animate':''" :options="val.type" v-model="val.checklist" @on-change="change(index)"></checklist>
      </group>
    </div>
    <toast v-model="warnShow" type="warn" :time="2000">请选择餐别时间</toast>
  </div>
</template>

<script>
export default {
  mounted () {
    let date = new Date()
    let week = (date.getDay() - 8) * -1
    date.setDate(date.getDate() + week)
    for (var i = 0; i < 7; i++) {
      this.formatDate(i === 0 ? date : new Date(date.setDate(date.getDate() + 1)), i)
    }
  },
  data () {
    return {
      commonList: [],
      warnShow: false
    }
  },
  methods: {
    change (i) {
      this.$forceUpdate()
      if (this.commonList[i].checklist.length === this.commonList[i].type.length) {
        this.commonList[i].all = true
        this.commonList[i].notAll = false
      } else if (this.commonList[i].checklist.length > 0 && this.commonList[i].checklist.length !== this.commonList[i].type.length) {
        this.commonList[i].notAll = true
      } else {
        this.commonList[i].notAll = false
        this.commonList[i].all = false
      }
    },
    submit () {
      let list = 0
      this.commonList.forEach((val, i) => {
        if (this.commonList[i].checklist.length === 0) {
          ++list
        }
      })
      if (list === this.commonList.length) {
        console.log('请勾选餐别选项')
        this.warnShow = true
      } else {
        this.$vux.loading.show({
          text: '正在提交中'
        })
        setTimeout(() => {
          this.$vux.loading.hide()
          this.$vux.toast.show({
            text: '提交成功'
          })
        }, 2000)
      }
    },
    // 下拉菜单按钮
    showConFun (i) {
      this.$forceUpdate()
      this.$set(this.commonList[i], 'showContent', !this.commonList[i].showContent)
    },
    // 全选按钮
    clickAll (i) {
      this.$forceUpdate()
      this.$set(this.commonList[i], 'all', !this.commonList[i].all)
      if (this.commonList[i].all) {
        this.commonList[i].checklist = this.commonList[i].type
      } else {
        this.commonList[i].checklist = []
      }
    },
    // 自动生成下周日期
    formatDate (date, i) {
      var year = date.getFullYear()
      var month = (date.getMonth() + 1)
      var day = date.getDate()
      var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][date.getDay()]
      this.commonList.push({title: year + '-' + this.zero(month) + '-' + this.zero(day) + ' ' + week})
      this.commonList[i].showContent = false
      this.commonList[i].all = false
      this.commonList[i].notAll = false
      this.commonList[i].type = ['早餐', '午餐', '晚餐', '夜宵', '早早餐']
      this.commonList[i].checklist = []
    },
    zero (val) {
      return val < 10 ? '0' + val : val
    }
  }
}
</script>
<style scoped>
  .vux-header {
    position: fixed;
    width: 100%;
    z-index: 9;
  }
  .main {
    padding-top: 46px;
  }
  .slide {
    padding: 0 20px;
    overflow: hidden;
    max-height: 0;
    transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;
  }
  .animate {
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
    transition-delay: 0s;
  }
</style>
